﻿<!DOCTYPE html>
<html lang="en">
    <head>
    <!--This sample is found at http://www.giantflyingsaucer.com/blog/?p=2658-->
    <title>WP7 Canvas</title>
    <!-- References to jQuery, jQuery Mobile and the mobile theme CSS are all required to start using jQueryMobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="js/jQueryMobile/jquery.mobile-1.0rc1.css" />
	<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
	<script type="text/javascript" src="js/jQueryMobile/jquery.mobile-1.0rc1.js"></script>
         <script>
             $(function () {
                 var canvasContext;
                 resizeCanvas();
                 $(window).resize(function () { resizeCanvas() });

                 function resizeCanvas() {
                     var w = window.innerWidth / 1.2;
                     var h = window.innerHeight / 1.2;
                     var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';

                     $('#contentholder').empty();
                     $(canvasString).appendTo('#contentholder');
                     canvasContext = $('#mainCanvas').get(0).getContext('2d');

                     $('#mainCanvas').bind('tap', function (event) {
                         touchX = event.pageX;
                         touchY = event.pageY;
                         canvasContext.fillStyle = "#0f0";
                         canvasContext.fillRect(touchX, touchY, 10, 10);

                         canvasContext.font = "8pt Arial";
                         canvasContext.fillText("X: " + touchX + " Y: " + touchY, touchX, touchY);
                     });
                 }
             });
            </script>
    <style>
      #mainCanvas
      {
        background-color: #000;
        border: solid 1px #0F0;
      }
      body
      {
        background: #000;
      }
      #contentholder
      {
        width: 99%;
        height: 99%;
        margin: 0 auto;
        text-align: center;
      }
     </style>
    </head>
 
    <body>
    <div  data-role="page">
        <div data-role="header">Header</div>
        <p>Click within black rectangle</p>
        <div data-role="content"><div id="contentholder"></div></div>
        <div data-role="footer">Footer</div>
    </div>
    </body>
</html>